<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view class="sparelist-content">
		<headassy title="旧件列表" searchTitle="旧件名称" @goSearch="goSearch" @openSideBar="getAllSearch" @changeTab="changeTab" :tabs="tabs"></headassy>
		<view style="display: flex; padding: 0 20rpx;" class="nav-status text-gray" v-if="sparelist.length > 0">
			<view :class="params.applyType == '自购备件' ? 'text-orange' : ''" @click="changeList('自购备件')">自购备件({{statuList[0].count}})</view>
			<view style="margin: 0 10rpx; color: #d3d3d3">|</view>
			<view :class="params.applyType == '厂家备件' ? 'text-orange' : ''" @click="changeList('厂家备件')">厂家备件({{statuList[1].count}})</view>
		</view>
		<scroll-view>
			<view class="card-list">
				<view class="card mt-5" v-for="item in sparelist" :key="item.id">
					<view class="top u-flex-between" @click="goDetail(item)">
						<view class="left u-flex">
							<view class="text-info">
								{{item.workNo}}
							</view>
						</view>
						<view class="right u-flex">
								<!-- :class="{'cus-btn':item.applyType==='自购备件','cus-btn2':item.applyType==='厂家备件','text-blue':item.applyType==='自购备件','text-green':item.applyType==='厂家备件'}" -->
							<view class="cus-blue-tag "
								style="margin-right: 12px;">
								{{item.applyType}}
							</view>
								<!-- :class="{'cus-btn':item.reviewTime==='待审核','text-blue':item.reviewTime==='待审核','cus-orange2-btn':item.reviewTime==='待发货'}"> -->
							<view class="cus-blue-tag ">
								{{item.reviewTime}}
							</view>
						</view>
					</view>
					<view class="center" @click="goDetail(item)">
						<view class="title u-flex-between">
							<view class="title-left text-gray">
								备件名称:
								<span style="margin-left: 14rpx;">{{item.pareName ? item.pareName : ''}}</span>
							</view>

						</view>
						<view class="text">
							申请网点:
							<span style="margin-left: 14rpx;">{{item.netName ? item.netName : ''}}</span>
						</view>
						<view class="text">
							收取费用:
							<span style="margin-left: 14rpx;">￥</span>
							<span>{{item.applyFees ? item.applyFees : ''}}</span>
						</view>
						<!-- <view class="text">
							审核费用:
							<span style="margin-left: 14rpx;">￥</span>
							<span>{{item.spareCost}}</span>
						</view> -->
						<view class="text">
							申请时间:
							<span style="margin-left: 14rpx;">{{item.applyTime ? item.applyTime : ''}}</span>
						</view>
						<view class="text">
							审核时间:
							<span style="margin-left: 14rpx;">{{item.reviewTimes ? item.reviewTimes : ''}}</span>
						</view>
					</view>
					<view class="down u-flex-between">
						<view class="">
							审批人员: {{item.reviewEmp ? item.reviewEmp : ''}}
						</view>
						<view class="right u-flex">
							<view class="cus-blue-btn  mr-5" @click="goWorkList(item)" style="margin-right: 12px;">
								工单
							</view>
							<view class="cus-oragen-btn" v-if="item.reviewTime==='待审核'" @click="goprocess(item)">
								审核
							</view>
							<view class="cus-gray-btn" v-else-if="item.reviewTime==='待发货'">
								反审核
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="example-body">
				<uni-load-more :status="status" :content-text="contentText"/>
			</view>
		</scroll-view>
		
		<!-- 侧边栏 -->
		<sidebarpop
			ref="sparelist-sidebar"
			:height="(parseInt(system.safeArea.top) + 44)"
			ptitle="筛选"
			:sidebarList="JSON.stringify(sidebarList)"
			@closeclick="closePop"
			@saveclick="radioClick"
		>
		</sidebarpop>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: [					{						name: '退回中',						disabled: false,						param: {							status: '撤销中'						}					},					{						name: '待退回',						disabled: false,						param: {							status: '待退回'						}					},					{						name: '待入库',
						disabled: false,						param: {							status: '待入库'						}						}, 
					{						name: '全部退回',
						disabled: false,						param: {							status: '全部撤销'						}					},				],
				page: {
					pageNum: 1,
					pageSize: 20,
				},
				params: {
					custAccId: '',
					applyType: '厂家备件',	// 备件类别 厂家备件or自购备件
				},
				newParams: [],
				sparelist: [],
				keyword: '',
				count: '',
				wdselect: [],
				kfselect: [],
				show: false,
				data: {
					networkId: '',
					status: '',
					applyType: '',
					reviewName: '',
					status: '',
					applyType: '',

				},
				select: {
					networkId: '',
					status: '',
					applyType: '',
					reviewName: '',
					status: '',
					applyType: ''
				},
				navBgColor: '#fd7400',
				tagBgColor: '#fd7400',
				defaultBgColor: '#f5f5f5',
				tagColor: '#fff',
				defaultColor: '#000',
				statuList: [{
						name: '自购备件',
						param: {
							status: '自购备件'
						},
						count: 0,
					},
					{
						name: '厂家备件',
						param: {
							status: '厂家备件'
						},
						count: 0,
					}
				],
				system: uni.getSystemInfoSync(),
				
				status: 'loading',		//上拉加载
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				sidebarList: [],			// 侧边栏数据
				popShow: false,				// 弹窗触发时为true
			};
		},
		onLoad(e) {
			let select = uni.getStorageSync('spare_select');
			if (select) {
				this.select = select;
			}
		
			let data = uni.getStorageSync('spare_data');
			if (data) {
				this.data = data;
			}
			
			this.params.custAccId = uni.getStorageSync('custAccid');
		
		
			if (e.typeName) {
				for (var i = 0; i < this.tabs.length; i++) {
					if (this.tabs[i].name === e.typeName) {
						this.tabIndex = i;
						this.newParams = {
							...this.tabs[i].param
						};
						break;
					}
				}
			}
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(function() {
				uni.hideLoading();
			}, 500);
			this.getSpareList()
			this.findemp();
			this.findwd();
			// this.sidebarInit();
		},
		// 下拉刷新
		onPullDownRefresh() {
			
			this.getPullRefresh()
		},
		// 触底监听
		onReachBottom() {
			console.log('触底,判断数据余量,更新数据');
			console.log('列表分组总数:'+Math.ceil(this.count / 20),'当前列表:'+this.page.pageNum);
			if(this.page.pageNum < Math.ceil(this.count / 20)) {
				this.status = 'loading';
				this.page.pageNum++;
				this.getSpareList('refresh');
			}else {
				this.status = 'noMore';
				// this.$alertTost('到底了~')
			}
		},
		methods: {
			// 初始化数据
			async sidebarInit() {
				const sidebarLable = ['工单状态','全部类型','客服','网点'];
				const sidebarList = [this.tabs,this.statuList,this.wdselect,this.kfselect];
				this.sidebarList = [];
				sidebarLable.forEach((val,index) => {
					this.sidebarList.push({
						selectEle: null,
						isShowList: false,
						title: val,
						isModelShow: index == 0 ? this.tabIndex == (this.tabs.length - 1) : true,
						data: this.handleSidebarData(sidebarList[index])
					});
				})
				console.log('侧边栏预处理数据----',this.sidebarList);
			},
			handleSidebarData(res = []) {
				let data = res;
				data.forEach(val => {
					val.ischeck = false;
					if(!val.title) {
						if(val.nameVal) {
							val.title = val.nameVal
						}
						if(val.name) {
							val.title = val.name
						}
					}
				})
				return data
			},
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				// 初始化
				this.status = 'loading';
				
				this.getSpareList()
				this.findemp()
				this.findwd()
				uni.stopPullDownRefresh()
			},
			// 获取
			async getSpareList(type) {
				const res = await uni.$api.work.getSpareList({
					...this.page,
					...this.newParams,
					...this.params
				})
				const resCount = await uni.$api.work.getSpareListTotal({
					...this.page,
					...this.newParams,
					custAccId: this.params.custAccId
				})
				
				// 备件列表数 自购备件purchases,厂家备件Manufacturer
				this.statuList[0].count = resCount.data.purchases;
				this.statuList[1].count = resCount.data.Manufacturer;
				
				if(type == 'refresh') {
					this.sparelist.push(...res.data);
				}else {
					this.sparelist = [];
					this.page.pageNum = 1;
					this.sparelist = res.data
				}
				this.count = res.count
				this.status = 'noMore';
				
				// this.statuList.
				console.log('备件列表---',res)
			},
			
			// 查询筛选
			async findemp() {
				const res = await uni.$api.work.findwd({
					custAccId: this.params.custAccId
				})
				this.kfselect = res.data
				console.log(this.kfselect, 'this.wdselect')
			},
			async findwd() {
				const res = await uni.$api.work.findemp({
					custAccId: this.params.custAccId
				})
				this.wdselect = res.data
				console.log(this.wdselect, 'this.wdselect')
			},
			leftClick(e){
				let pages = getCurrentPages();
				console.log('pages', pages)
				if(pages.length > 1){
					uni.navigateBack();
				}else{
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			rightClick(e){
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			changeTab(index) {
				console.log(index)
				this.newParams = {
					...index.param,
				};
				// 回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
				this.tabIndex = index.index;
				this.status = 'loading';
				this.getSpareList()
			},
			// 去工单详细
			goWorkList(item) {
				console.log(item, '工单详细')
				uni.navigateTo({
					// workId
					url: `../../pages/worklist/workdetail?workId=${item.workId}`
				})
			},
			// 去审核备件
			goprocess(row) {
				uni.navigateTo({
					url: `./process?id=${row.id}&workId=${row.workId}`
				})
			},
			// 搜索
			goSearch() {
				let vagueSearch = this.keyword
				this.newParams = {
						spareModel: vagueSearch
					},
					this.sparelist = [];
				this.getSpareList()
			},
			close() {
				this.show = false
			},
			goDetail(item) {
				uni.navigateTo({
					url: `./sparedetail?spareId=${item.id}`
				})
			},
			//保存
			saveSelect() {
				uni.setStorageSync('spare_select', this.select);
				uni.setStorageSync('spare_data', this.data);
				this.show = false
			},
			// 取消
			clearSelect() {
				this.data = {
						networkId: '',
						status: '',
						applyType: '',
						reviewName: '',
						status: '',
						applyType: '',

					},
					this.select = {
						networkId: '',
						status: '',
						applyType: '',
						reviewName: '',
						status: '',
						applyType: ''
					},
					this.newParams = {
						...this.data
					}
				this.getSpareList()
				uni.removeStorageSync('spare_select');
				uni.removeStorageSync('spare_data');
				this.show = false
			},
			// 点击筛选
			radioClick(item, num) {
				console.log(item, 'item')
				switch (num) {
					// 客服
					case 1:
						this.data.reviewName = item.title
						this.select.reviewName = item.title
						this.newParams = {
							...this.data
						}
						break;
					case 2:
						// 网点
						this.data.networkId = item.id
						this.select.networkId = item.id
						this.newParams = {
							...this.data
						}
						break;
						// 工单状态
					case 3:
						this.select.status = item.name
						if (item.name === '审核中') {
							this.data.status = '审核中'
							this.newParams = {
								...this.data
							}
							break;
						} else if (item.name === '待发货') {
							this.data.status = '待发货'
							this.newParams = {
								...this.data
							}
							break;
						} else if (item.name === '全部备件') {
							this.data.status = '全部备件'
							this.newParams = {
								...this.data
							}
							break;
						} else if (item.name === '撤销中') {
							this.data.status = '撤销中'
							this.newParams = {
								...this.data
							}
							break;
						} else if (item.name === '待退回') {
							this.data.status = '待退回'
							this.newParams = {
								...this.data
							}
							break;
						} else if (item.name === '待入库') {
							this.data.status = '待入库'
							this.newParams = {
								...this.data
							}
							break;
						} else if (item.name === '全部撤销') {
							this.data.status = '全部撤销'
							this.newParams = {
								...this.data
							}
							break;
						} else if (item.name === '全部备件') {
							this.data.status = '全部备件'
							this.newParams = {
								...this.data
							}
							break;
						}
					case 4:
						this.data.applyType = item.name
						this.select.applyType = item.name
						this.newParams = {
							...this.data
						}
					default:
						break;
				}
				this.getSpareList()
			},
			// 切换备件列表展示状态
			changeList(type) {
				this.params.applyType = this.params.applyType == type ? '' : type;
				this.sparelist = [];
				this.status = 'loading';
				this.getSpareList();
			},
			
			// 关闭弹窗
			closePop() {
				this.popShow = false;
			},
			// 新开弹窗
			openModel(ref) {
				if(this.$refs[ref]) {
					this.sidebarInit();
					this.popShow = true;
					this.$refs[ref].pupshow = true;
				}
			},
		},

	}
</script>

<style lang="scss">
	// /deep/.u-popup__content {
	// 	border-top-left-radius: 10px;
	// 	border-bottom-left-radius: 10px;
	// }
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	// 去掉默认背景色
	/deep/.u-popup__content {
		background-color: transparent !important;
	}
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1 !important
	}
	
	.u-page__tag-item {
		width: calc(33.33% - 13px);
		margin-bottom: 13px;
		margin-right: 13px;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
	}

	.popup {
		.popup-content {
			margin-top: 0;
			float: right;
			width: 331px;
			padding: 0 16px;
			box-sizing: border-box;
			background: #fff;
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
			position: relative;
			height: 100vh;
			overflow: auto;
			padding-bottom: 110px;

			.top {
				line-height: 150%;
				padding-top: 13px;
				padding-bottom: 9px;
				border-bottom: solid 1px #e5e5e5;
			}

			.item-box {
				.item-title {
					padding-top: 13px;
					font-size: 13px;
					font-weight: 700;
				}

				.item {
					display: flex;
					flex-wrap: wrap;
					padding-top: 9px;
					padding-bottom: 5px;
					// justify-content: space-between;

				}
			}

			.foot {
				padding: 22px 0;
				border-top: solid 1px #e5e5e5;
				position: fixed;
				width: 288px;
				bottom: 0;
				background-color: $uni-bg-color;
			}
		}
	}

	.sparelist-content {
		// height: 100vh;
		background-color: $uni-bg-color-grey;

		.tabs {
			background-color: #fff;
			font-size: 28rpx;
		}

		.nav-status {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
		}


		.card-list {

			background: $uni-bg-color-grey;
			padding: 0 20rpx;

			.card {
				padding: 28rpx 32rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 28rpx;

				.top {
					border-bottom: solid 1px #f5f5f5;
					padding-bottom: 10px;

					.left {
						.text-info {
							font-size: 28rpx;
							font-weight: 700;
						}
					}
				}

				.center {
					padding-top: 10px;
					padding-bottom: 10px;
					.title {

						.title-left {
							font-size: 28rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.title-right {
							font-size: 28rpx;
						}
					}

					.text {
						font-size: 28rpx;
						color: gray;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.down {
					border-top: solid 1px #f5f5f5;
					padding-top: 12px;
				}
			}
		}


	}
</style>